import './index.less'
import { useCountUp } from 'react-countup'
import { useEffect, useRef } from 'react'
import { history } from '@umijs/max'
// import { App } from 'Antd'

const PanelBoxItem = ({ item }) => {
  const { message } = App.useApp()
  const countRef = useRef(null)
  const numberAnimation = useCountUp({
    ref: countRef,
    start: 0,
    end: 0,
    duration: 1.5
  })

  useEffect(() => {
    numberAnimation.update(item.count)
  }, [item])

  const gotoPage = () => {
    if (item.is_auth) {
      history.push(item.link)
    } else {
      // message.error('您暂无查看该内容的权限!')
      console.log("您暂无查看该内容的权限!")
    }
  }

  return (
    <div
      onClick={gotoPage}
      className={item.is_auth ? 'panel_item' : 'panel_item btn_disabled'}>
      <div className='panel_item_icon' style={{background:`url(${item.icon_url})`}}></div>
      <div className='panel_item_content'>
        <div className='panel_item_count' ref={countRef}>{item.count}</div>
        <div className='panel_item_title'>{item.name}</div>
      </div>
    </div>
  )
}
export default PanelBoxItem